<script lang="ts" setup>
import Status from './Status.vue'
</script>

<template>
  <div class="avatar">
    <div class="quote">总有些惊奇的悸遇，比如说 . . .</div>
    <div class="user">
      <div class="status">
        <img src="../../../assets/avatar.png" alt="">
        <span>love</span>
        <Status />
      </div>
      <img src="../../../assets/avatar.png" alt="">
    </div>
  </div>
</template>

<style lang="scss" scoped>
.avatar {
  box-sizing: border-box;
  height: 200px;
  border-radius: 10px;
  background: linear-gradient(0, rgb(252, 252, 255), rgbq(242, 242, 255, .5));
  display: flex;
  justify-content: space-between;
  // box-shadow: 0 0 5px 5px rgb(227, 227, 236);
  box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
}

.quote {
  padding: 24px;
}

.user {
  display: flex;
  padding: 10px 0;

  img {
    border-radius: 35px;
    margin: 0 10px;
    box-shadow: grey 10px 10px 20px 2px;
  }

  &>img {
    border-radius: 35px;
  }

  .status {
    padding: 10px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    span {
      display: block;
      text-align: right;
      font-family: '楷体';
      font-weight: 700;
      font-size: 24px;
    }

    img {
      width: 80px;
      border-radius: 20px;
      transform: rotateY(180deg);
      box-shadow: grey 0 10px 10px;
    }
  }
}
</style>